---
title: Integrations
date: 2025-01-27
description: Animated integrations showcase component with marquee effects and gradient backgrounds.
author: karthikmudunuri
published: true
---

<ComponentPreview name="integrations-demo" />

## Installation

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger value="cli">CLI</TabsTrigger>
    <TabsTrigger value="manual">Manual</TabsTrigger>
  </TabsList>
  <TabsContent value="cli">

     ```bash
    npx shadcn@latest add @eldoraui/integrations
    ```

  </TabsContent>
  <TabsContent value="manual">
    <Steps>
      <Step>Copy and paste the following code into your project.</Step>

      `components/eldoraui/integrations.tsx`

      <ComponentSource name="integrations" />
      <Step>
        Also copy and paste the following code for the Marquee dependency.
      </Step>
      `components/eldoraui/marquee.tsx`
      <ComponentSource name="marquee" />
      <Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

```css title="app/globals.css" showLineNumbers {2-3, 4-20}
@theme inline {
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
}
```

      <Step>Update the import paths to match your project setup.</Step>

    </Steps>

  </TabsContent>
</Tabs>

## Examples

### Background with Content Overlay

<ComponentPreview name="integrations-demo-2" />

## Usage

```tsx showLineNumbers
import Integrations from "@/components/eldoraui/integrations"
```

```tsx showLineNumbers
<Integrations />
```

## Props

| Prop     | Type | Default | Description                                                                        |
| -------- | ---- | ------- | ---------------------------------------------------------------------------------- |
| No props | -    | -       | This component doesn't accept any props. It's a self-contained showcase component. |

## Features

- **Animated Cards**: Each integration card has smooth entrance animations
- **Marquee Effects**: Multiple marquee rows with different speeds and directions
- **Gradient Backgrounds**: Beautiful gradient backgrounds for each integration icon
- **Responsive Design**: Works seamlessly across all device sizes
- **Dark Mode Support**: Fully compatible with light and dark themes
- **Random Shuffling**: Integration tiles are randomly shuffled on each render
- **Smooth Animations**: Powered by Framer Motion for fluid transitions
